<template>
  <div
    class="app-container"
    :style="`min-height: ${pageMinHeight}px;height:${pageMinHeight}px`"
  >
    <a-button
      style="position: fixed; left: 280px; z-index: 1100"
      @click="addMarkers"
    >
      添加mark
    </a-button>
    <a-button
      style="position: fixed; left: 370px; z-index: 1100"
      @click="updateMarker"
    >
      更新marker位置
    </a-button>
    <a-button
      style="position: fixed; left: 500px; z-index: 1100"
      @click="updateMarkerIcon"
    >
      更新marker图标
    </a-button>
    <a-button
      style="position: fixed; left: 630px; z-index: 1100"
      @click="outClick"
    >
      跳转marker并展示
    </a-button>
    <a-button
      style="position: fixed; left: 772px; z-index: 1100"
      @click="hideNavbar"
    >
      隐藏工具栏
    </a-button>

    <div id="viewer"></div>
  </div>
</template>
<script>
  import { mapGetters } from 'vuex'
  import PhotoSphereViewer from 'photo-sphere-viewer'
  import 'photo-sphere-viewer/dist/photo-sphere-viewer.css'

  export default {
    data() {
      return {
        PSV: '',
        imgUrl: require('../../assets/img/sphere.jpg'),
        littlePlanet: null,
      }
    },
    computed: {
      ...mapGetters('setting', ['pageMinHeight']),
    },

    created() {
      this.$nextTick(() => {
        this.initPhotoSphere()
      })
    },
    methods: {
      //详情请查看文档：  https://photo-sphere-viewer-3.netlify.app/
      initPhotoSphere() {
        const self = this
        self.PSV = new PhotoSphereViewer({
          container: document.querySelector('#viewer'),
          panorama: self.imgUrl,
          // navbar: [], //配置工具栏工具
          // loading_img:"",
          time_anim: false,
          caption: '上海米度',
          size: {
            width: '100%',
            height: '100%',
          },

          markers: [
            {
              // image marker that opens the panel when clicked
              id: 'image',
              longitude: 0.2,
              latitude: -0.1377,
              image: require('../../assets/img/add.png'),
              width: 32,
              height: 32,
              anchor: 'bottom center',
              tooltip: 'A image marker. <b>Click me!</b>',
            },
          ],
        })
        //新增
        self.PSV.on('click', function (e) {
          console.log(e.longitude, e.latitude)
          self.PSV.addMarker({
            id: '#' + Math.random(),
            longitude: e.longitude,
            latitude: e.latitude,
            image: require('../../assets/img/add.png'),
            width: 32,
            height: 32,
            anchor: 'bottom center',
            tooltip: '新增marker',
            data: {
              generated: true,
            },
          })
        })
        //删除marekr
        self.PSV.on('select-marker', function (marker) {
          if (marker.data && marker.data.generated) {
            self.PSV.removeMarker(marker)
          }
        })

        self.PSV.on('goto-marker-done', function (marker) {
          console.log(marker, 'marker')
          console.log('goto-done', marker.id)
        })
      },
      outClick() {
        this.PSV.gotoMarker('image')
        this.PSV.showTooltip()
      },
      addMarkers() {
        this.PSV.addMarker({
          id: '#add',
          longitude: 5.9519494128398245,
          latitude: 0.1628908181118225,
          image: require('../../assets/img/add.png'),
          width: 32,
          height: 32,
          anchor: 'bottom center',
          tooltip: '新增marker',
        })
      },
      updateMarkerIcon() {
        this.PSV.updateMarker({
          id: 'image',
          image: require('../../assets/img/iconType0.png'),
          tooltip: '修改图标后marker',
        })
      },
      updateMarker() {
        this.PSV.updateMarker({
          id: 'image',
          longitude: 0.612326739579703,
          latitude: -0.03205143775427843,
          tooltip: '修改位置后marker',
        })
      },
      hideNavbar() {
        // this.PSV.hideNavbar() //或
        this.PSV.toggleNavbar(false) //true or false
      },
    },
  }
</script>
<style scoped lang="less">
  /deep/ .ant-layout-sider {
    position: relative;
    flex: 0 0 300px !important;
    width: 300px !important;
    min-width: 300px !important;
    max-width: 300px !important;
    background: white;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
  }
</style>
